<template>
  <div class="Executor">
    <!-- 执行人问卷页面 -->

    <span class="tit">{{ selectIntroduceList.taskName }}</span>
    <span
      class="misLV"
      :class="{
        LvOne: selectIntroduceList.priority <= 100,
        LvTwo:
          (selectIntroduceList.priority <= 200) &
          (selectIntroduceList.priority > 100),
        LvThree: selectIntroduceList.priority > 200,
      }"
      >LV {{ selectIntroduceList.priority }}</span
    >
    <div class="tags">
      <el-tag
        v-for="item in selectIntroduceList.labelName"
        :key="item.index"
        size="mini"
        type="info"
        >{{ item.labelName }}</el-tag
      >
    </div>
    <div class="btnbox btnbox1">
      <div v-if="currentState === 1 || currentState === 2">
        <button class="edit" @click="handleimport">导入</button>
        <button v-if="currentState === 1" class="edit" @click="addEditBtn()">
          新增
        </button>
        <button v-else-if="currentState === 2" class="edit" @click="editBtn()">
          编辑
        </button>
      </div>
      <div v-else>
        <button class="edit cancle" @click="changeEditClose()">取消</button>
        <button
          v-loading="loading"
          class="edit"
          v-preventReClick
          @click="changeEditBtn()"
        >
          提交
        </button>
      </div>
    </div>

    <div v-if="currentState === 1" class="table1">暂无执行人问卷</div>
    <!-- 问卷详情 -->
    <div v-show="currentState === 2" class="table">
      <div v-if="selectTestingList">
        <el-table
          :data="selectTestingList.questionList"
          height="63vh"
          style="width: 98%; margin: 0 auto"
          :header-cell-style="{
            textAlign: 'center',
            color: '#333333',
            fontWeight: '400',
            height: '55px',
            fontSize: '14px',
            backgroundColor: '#F1F5FF',
          }"
          :cell-style="{ textAlign: 'center' }"
        >
          <el-table-column label="问题" prop="title" width="300">
          </el-table-column>
          <el-table-column label="答案属性" width="240">
            <template slot-scope="scope">
              <div>
                <div class="radioBox">
                  <el-radio v-model="scope.row.questionType" disabled label="1"
                    >单选</el-radio
                  >
                </div>
                <div class="radioBox">
                  <el-radio v-model="scope.row.questionType" disabled label="2"
                    >多选</el-radio
                  >
                  <span>
                    <input
                      type="text"
                      readonly="readonly"
                      class="checkNum"
                      maxlength="1"
                      v-model="scope.row.mincount"
                      placeholder="0"
                    />
                    到
                    <input
                      type="text"
                      readonly="readonly"
                      class="checkNum"
                      maxlength="1"
                      v-model="scope.row.maxcount"
                      placeholder="0"
                    />
                  </span>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="选项答案" width="330">
            <template slot-scope="scope">
              <div>
                <div
                  class="litDelBox"
                  v-for="item in scope.row.answervolist"
                  :key="item.index"
                >
                  {{ item.itemName }}
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="被评分人" width="80">
            <template slot-scope="scope">
              <div
                class="litDelBox"
                v-for="item in scope.row.answervolist"
                :key="item.index"
              >
                {{ item.roleVoList.evalroleName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="能力">
            <template slot-scope="scope">
              <div
                class="litDelBox"
                v-for="item in scope.row.answervolist"
                :key="item.index"
              >
                {{ item.evalList.evalItemName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="分值类型" width="80">
            <template slot-scope="scope">
              <div
                class="litDelBox"
                v-for="item in scope.row.answervolist"
                :key="item.index"
              >
                <span v-if="item.pointsType === 2">过程性考核</span>
                <span v-else>阶段性考核</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="分值" width="80">
            <template slot-scope="scope">
              <div
                class="litDelBox"
                v-for="item in scope.row.answervolist"
                :key="item.index"
              >
                {{ item.points }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 新增问卷 -->
    <div v-show="currentState === 3" class="table">
      <div
        type="primary"
        @click="pushAdd()"
        title="添加问题行"
        style="left: 330px; top: 22px"
        class="plus1"
      >
        +
      </div>
      <el-table
        :data="addTestingData.questionList"
        height="63vh"
        :row-class-name="tableRowClassName"
        style="width: 98%; margin: 0 auto"
        :header-cell-style="{
          textAlign: 'center',
          color: '#333333',
          fontWeight: '400',
          height: '55px',
          fontSize: '14px',
          backgroundColor: '#F1F5FF',
        }"
        :cell-style="{ textAlign: 'center' }"
      >
        <el-table-column label="问题" width="300">
          <template slot-scope="scope">
            <div class="queInputBox">
              <el-input
                maxlength="60"
                class="queInput"
                show-word-limit
                type="textarea"
                v-model="scope.row.title"
                placeholder="请输入问题"
              />
              <span
                class="litDel litDel1"
                @click="handelDelete(scope.row.index)"
                >-</span
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column label="答案属性" width="240">
          <template slot-scope="scope">
            <div>
              <div class="radioBox">
                <el-radio v-model="scope.row.questionType" label="1"
                  >单选</el-radio
                >
              </div>
              <div class="radioBox radioBox1">
                <el-radio v-model="scope.row.questionType" label="2"
                  >多选</el-radio
                >
                <span>
                  <input
                    type="text"
                    class="checkNum"
                    maxlength="1"
                    v-model="scope.row.mincount"
                    placeholder="0"
                  />
                  到
                  <input
                    type="text"
                    class="checkNum"
                    maxlength="1"
                    v-model="scope.row.maxcount"
                    placeholder="0"
                  />
                </span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="选项答案" width="330">
          <template slot-scope="scope">
            <div>
              <div
                class="litDelBox"
                v-for="(item, index) in scope.row.answervolist"
                :key="index"
              >
                <span
                  class="litDel"
                  @click="scope.row.answervolist.splice(index, 1)"
                  >-</span
                >
                <input
                  v-model="item.itemName"
                  style="width: 80%; height: 80%; outline: none; border: none"
                  type="text"
                  maxlength="50"
                  placeholder="请输入答案"
                />
              </div>
              <div
                type="primary"
                title="添加答案行"
                @click="addEditPlusBtn(scope.row)"
                class="plus"
              >
                +
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="被评分人" width="80">
          <template slot-scope="scope">
            <div
              class="litDelBox"
              v-for="item in scope.row.answervolist"
              :key="item.index"
            >
              <el-select
                v-model="item.evaluationRoleId"
                size="mini"
                clearable
                placeholder="请选择被评分人"
              >
                <el-option
                  v-for="item in ratedOptions"
                  :key="item.roleId"
                  :label="item.roleName"
                  :value="item.roleId"
                >
                </el-option>
              </el-select>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="能力">
          <template slot-scope="scope">
            <div
              class="litDelBox"
              v-for="item in scope.row.answervolist"
              :key="item.index"
            >
              <el-select
                v-model="item.evaluationdetailitemId"
                size="mini"
                clearable
                placeholder="请选择能力"
              >
                <el-option
                  v-for="item in abilityOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="分值类型" width="80">
          <template slot-scope="scope">
            <div
              class="litDelBox"
              v-for="item in scope.row.answervolist"
              :key="item.index"
            >
              <el-select
                v-model="item.pointsType"
                size="mini"
                clearable
                placeholder="请选择分值类型"
              >
                <el-option
                  v-for="item in typeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="分值" width="80">
          <template slot-scope="scope">
            <div
              class="litDelBox"
              v-for="item in scope.row.answervolist"
              :key="item.index"
            >
              <input
                oninput="if(value.length>5)value=value.slice(0,5);if(value>100)value=100;if(value<-100)value=-100;"
                min="-100"
                max="100"
                type="Number"
                v-model="item.points"
                placeholder="请输入分值"
              />
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 编辑问卷 -->
    <el-dialog
      :visible="showDialog"
      top="6%"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="98%"
    >
      <span class="tit">{{ selectIntroduceList.taskName }}</span>
      <span
        class="misLV"
        :class="{
          LvOne: selectIntroduceList.priority <= 100,
          LvTwo:
            (selectIntroduceList.priority <= 200) &
            (selectIntroduceList.priority > 100),
          LvThree: selectIntroduceList.priority > 200,
        }"
        >LV {{ selectIntroduceList.priority }}</span
      >
      <div class="tags">
        <el-tag
          v-for="item in selectIntroduceList.labelName"
          :key="item.index"
          size="mini"
          type="info"
          >{{ item.labelName }}</el-tag
        >
      </div>
      <div class="btnbox btnbox1 btnbox2">
        <button class="edit cancle" @click="editClose()">取消</button>
        <button
          v-loading="loading1"
          class="edit"
          v-preventReClick
          @click="editDetermineBtn()"
        >
          提交
        </button>
      </div>
      <div class="table">
        <div
          type="primary"
          @click="pushEdit()"
          title="添加问题行"
          style="left: 330px; top: 22px"
          class="plus1"
        >
          +
        </div>
        <el-table
          :data="updateTestingData.questionList"
          height="63vh"
          :row-class-name="tableRowClassName"
          style="width: 98%; margin: 0 auto"
          :header-cell-style="{
            textAlign: 'center',
            color: '#333333',
            fontWeight: '400',
            height: '55px',
            fontSize: '14px',
            backgroundColor: '#F1F5FF',
          }"
          :cell-style="{ textAlign: 'center' }"
        >
          <el-table-column label="问题" width="300">
            <template slot-scope="scope">
              <div class="queInputBox">
                <el-input
                  maxlength="60"
                  class="queInput"
                  show-word-limit
                  type="textarea"
                  v-model="scope.row.title"
                  placeholder="请输入问题"
                />
                <span
                  class="litDel litDel1"
                  @click="handelDeleteEdit(scope.row.index)"
                  >-</span
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column label="答案属性" width="240">
            <template slot-scope="scope">
              <div>
                <div class="radioBox">
                  <el-radio v-model="scope.row.questionType" label="1"
                    >单选</el-radio
                  >
                </div>
                <div class="radioBox radioBox1">
                  <el-radio v-model="scope.row.questionType" label="2"
                    >多选</el-radio
                  >
                  <span>
                    <input
                      type="text"
                      class="checkNum"
                      maxlength="1"
                      v-model="scope.row.mincount"
                      placeholder="0"
                    />
                    到
                    <input
                      type="text"
                      class="checkNum"
                      maxlength="1"
                      v-model="scope.row.maxcount"
                      placeholder="0"
                    />
                  </span>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="选项答案" width="330">
            <template slot-scope="scope">
              <div>
                <div
                  class="litDelBox"
                  v-for="(item, index) in scope.row.answervolist"
                  :key="index"
                >
                  <span
                    class="litDel"
                    @click="scope.row.answervolist.splice(index, 1)"
                    >-</span
                  >
                  <input
                    v-model="item.itemName"
                    maxlength="50"
                    show-word-limit
                    style="width: 80%; height: 80%; outline: none; border: none"
                    type="text"
                    placeholder="请输入答案"
                  />
                </div>
                <div
                  type="primary"
                  title="添加答案行"
                  @click="editPlusBtn(scope.row)"
                  class="plus"
                >
                  +
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="被评分人" width="80">
            <template slot-scope="scope">
              <div
                class="litDelBox"
                v-for="item in scope.row.answervolist"
                :key="item.index"
              >
                <el-select
                  v-model="item.evaluationRoleId"
                  size="mini"
                  clearable
                  placeholder="请选择被评分人"
                  @change="$forceUpdate()"
                >
                  <el-option
                    v-for="item in ratedOptions"
                    :key="item.roleId"
                    :label="item.roleName"
                    :value="item.roleId"
                  >
                  </el-option>
                </el-select>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="能力">
            <template slot-scope="scope">
              <div
                class="litDelBox"
                v-for="item in scope.row.answervolist"
                :key="item.index"
              >
                <el-select
                  v-model="item.evaluationdetailitemId"
                  size="mini"
                  clearable
                  placeholder="请选择能力"
                  @change="$forceUpdate()"
                >
                  <el-option
                    v-for="item in abilityOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="分值类型" width="80">
            <template slot-scope="scope">
              <div
                class="litDelBox"
                v-for="item in scope.row.answervolist"
                :key="item.index"
              >
                <el-select
                  v-model="item.pointsType"
                  size="mini"
                  clearable
                  placeholder="请选择分值类型"
                >
                  <el-option
                    v-for="item in typeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="分值" width="80">
            <template slot-scope="scope">
              <div
                class="litDelBox"
                v-for="item in scope.row.answervolist"
                :key="item.index"
              >
                <input
                  oninput="if(value.length>5)value=value.slice(0,5);if(value>100)value=100;if(value<-100)value=-100;"
                  min="-100"
                  max="100"
                  type="Number"
                  v-model="item.points"
                  placeholder="请输入分值"
                />
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>

    <!-- 导入弹层 -->
    <daoru
      :showimport.sync="showimport"
      :token="token"
      @updateList="getSelectTaskSummary"
    ></daoru>
  </div>
</template>

<script>
import {getSelectTaskSummary, getSelectTesting, getSelectAllRoleName, addTesting, updateTesting, getSelectAbility} from '@/api/task/task.js';
import daoru from './footertab/importExecutor.vue';
export default {
  name: 'Executor',
  inject: ['reload'],
  components: {
    daoru
  },
  data() {
    return {
      selectIntroduceList: {}, // 任务概况
      selectTestingList: {}, // 执行人问卷数据
      loading: false,
      loading1: false,

      // selectTestingList: {
      //   testId: 8, // 问卷id
      //   testType: 1, // 问卷属性1执行人2审核人
      //   questionList: [ // 问题列表
      //     {
      //       questionId: 13, // 问题id
      //       title: '问题', // 问题
      //       questionType: '1', // 问题属性1单选2多选
      //       mincount: 1, // 问题最小值
      //       maxcount: 3, // 问题最大值
      //       answervolist: [ // 每个问题的选项列表
      //         {
      //           itemId: 12, // 选项id
      //           itemName: '选项3', // 选项名称
      //           evalList: {
      //             evaluationdetailitemId: 2199, // 能力id
      //             evalItemName: '数据库熟练' // 能力名字
      //           },
      //           roleVoList: {
      //             evaluationRoleId: 381, // 角色id
      //             evalroleName: '4444' // 角色名字
      //           },
      //           points: 77, // 分值
      //           pointsType: 1// 分值类型1过程2阶段
      //         },
      //         {
      //           itemId: 11,
      //           itemName: '选项2',
      //           evaluationdetailitemId: 1,
      //           evalItemName: '能力2',
      //           evaluationRoleId: 1,
      //           evalroleName: '李四',
      //           points: 99,
      //           pointsType: 1
      //         },
      //         {
      //           itemId: 10,
      //           itemName: '额额2',
      //           evaluationdetailitemId: 2,
      //           evalItemName: '能力3',
      //           evaluationRoleId: 3,
      //           evalroleName: '王二',
      //           points: 88,
      //           pointsType: 1
      //         }
      //       ]
      //     },
      //     {
      //       questionId: 12,
      //       title: '问题名称2',
      //       questionType: '2',
      //       mincount: 2,
      //       maxcount: 4,
      //       answervolist: []
      //     },
      //     {
      //       questionId: 11,
      //       title: '问题名称3',
      //       questionType: '1',
      //       mincount: 1,
      //       maxcount: 4,
      //       answervolist: []
      //     }
      //   ]
      // },

      currentState: 1, // 当前状态 1新增2编辑3提交
      showDialog: false, // 编辑弹层控制
      showimport: false, // 导入弹层控制
      token: sessionStorage.getItem('usertoken'),
      addTestingData: { // 新增问卷数据
        questionList: [ // 问题列表
          {
            answervolist: [ // 每个问题的选项列表
              {
                evaluationRoleId: null, // 角色id
                evaluationdetailitemId: null, // 能力id
                itemName: '', // 选项名称
                points: null, // 分值
                pointsType: 1 // 分值类型1过程2阶段
              },
              {
                evaluationRoleId: null, // 角色id
                evaluationdetailitemId: null, // 能力id
                itemName: '', // 选项名称
                points: null, // 分值
                pointsType: 1 // 分值类型1过程2阶段
              },
              {
                evaluationRoleId: null, // 角色id
                evaluationdetailitemId: null, // 能力id
                itemName: '', // 选项名称
                points: null, // 分值
                pointsType: 1 // 分值类型1过程2阶段
              },
              {
                evaluationRoleId: null, // 角色id
                evaluationdetailitemId: null, // 能力id
                itemName: '', // 选项名称
                points: null, // 分值
                pointsType: 1 // 分值类型1过程2阶段
              }
            ],
            maxcount: null, // 答案最大值
            mincount: null, // 答案最小值
            questionType: null, // 问题属性1单选2多选
            title: '' // 问题
          }
        ],
        taskId: parseInt(localStorage.getItem('taskId')), // 任务id
        testType: 1 // 问卷属性1执行人2审核人
      },
      updateTestingData: { // 编辑问卷数据
        questionList: [ // 问题列表
          {
            answervolist: [ // 每个问题的选项列表
              {
                evaluationRoleId: null, // 角色id
                evaluationdetailitemId: null, // 能力id
                itemName: '', // 选项名称
                points: null, // 分值
                pointsType: null // 分值类型1过程2阶段
              }
            ],
            maxcount: null, // 答案最大值
            mincount: null, // 答案最小值
            questionType: null, // 问题属性1单选2多选
            title: '' // 问题
          }
        ],
        taskId: parseInt(localStorage.getItem('taskId')), // 任务id
        testId: null,
        testType: 1 // 问卷属性1执行人2审核人
      },
      ratedOptions: [], // 被评分人
      typeOptions: [
        {
          value: 1,
          label: '过程性考核'
        },
        {
          value: 2,
          label: '阶段性考核'
        }
      ], // 分值类型
      abilityOptions: [] // 能力列表
    };
  },
  created() {
    this.getSelectTaskSummary();
  },
  methods: {
    // 获取问卷数据
    async getSelectTaskSummary() {
      const {data} = await getSelectTaskSummary({taskId: parseInt(localStorage.getItem('taskId'))});
      this.selectIntroduceList = data;
      // console.log(this.selectIntroduceList);
      const {data: data1} = await getSelectTesting({taskId: this.selectIntroduceList.taskId, testType: 1});
      // const {data: data1} = await getSelectTesting({taskId: 22, testType: 1}); // 测试
      // console.log(data1);
      if (data1 !== null) {
        data1.questionList.forEach(item => {
          item.questionType = item.questionType + '';
          if (item.maxcount === null) {
            item.maxcount = 0;
          }
          if (item.mincount === null) {
            item.mincount = 0;
          }
        });
        for (var i = 0; i < data1.questionList.length - 1; i++) {
          let temp = {};
          for (var j = i + 1; j < data1.questionList.length; j++) {
            if (data1.questionList[i].questionId > data1.questionList[j].questionId) {
              temp = data1.questionList[i];
              data1.questionList[i] = data1.questionList[j];
              data1.questionList[j] = temp;
            }
          }
        }
        this.currentState = 2;
      } else {
        this.currentState = 1;
      }
      this.selectTestingList = data1;
      // console.log(this.selectTestingList);
    },
    // 新增问卷按钮
    async addEditBtn() {
      this.currentState = 3;
      const {data} = await getSelectAllRoleName({projectId: this.selectIntroduceList.projectId});
      // console.log(data);
      this.ratedOptions = data;
      const {data: data1} = await getSelectAbility({projectId: this.selectIntroduceList.projectId});
      this.abilityOptions = data1;
      // console.log(this.abilityOptions);
    },
    // 新增问卷行
    pushAdd() {
      this.addTestingData.questionList.push(
        {
          answervolist: [ // 每个问题的选项列表
            {
              evaluationRoleId: null, // 角色id
              evaluationdetailitemId: null, // 能力id
              itemName: '', // 选项名称
              points: null, // 分值
              pointsType: 1 // 分值类型1过程2阶段
            },
            {
              evaluationRoleId: null, // 角色id
              evaluationdetailitemId: null, // 能力id
              itemName: '', // 选项名称
              points: null, // 分值
              pointsType: 1 // 分值类型1过程2阶段
            },
            {
              evaluationRoleId: null, // 角色id
              evaluationdetailitemId: null, // 能力id
              itemName: '', // 选项名称
              points: null, // 分值
              pointsType: 1 // 分值类型1过程2阶段
            },
            {
              evaluationRoleId: null, // 角色id
              evaluationdetailitemId: null, // 能力id
              itemName: '', // 选项名称
              points: null, // 分值
              pointsType: 1 // 分值类型1过程2阶段
            }
          ],
          maxcount: null, // 答案最大值
          mincount: null, // 答案最小值
          questionType: null, // 问题属性1单选2多选
          title: '' // 问题
        }
      );
    },
    // 新增问卷答案行限制
    addEditPlusBtn(i) {
      if (i.answervolist.length > 7) {
        return this.$message({
          showClose: true,
          message: '选项答案最多为8项！',
          type: 'warning'
        });
      }
      i.answervolist.push({
        evaluationRoleId: null, // 角色id
        evaluationdetailitemId: null, // 能力id
        itemName: '', // 选项名称
        points: null, // 分值
        pointsType: 1 // 分值类型1过程2阶段
      });
    },
    // 取消新增问卷
    changeEditClose() {
      this.currentState = 1;
      this.addTestingData = { // 新增问卷数据
        questionList: [ // 问题列表
          {
            answervolist: [ // 每个问题的选项列表
              {
                evaluationRoleId: null, // 角色id
                evaluationdetailitemId: null, // 能力id
                itemName: '', // 选项名称
                points: null, // 分值
                pointsType: 1 // 分值类型1过程2阶段
              },
              {
                evaluationRoleId: null, // 角色id
                evaluationdetailitemId: null, // 能力id
                itemName: '', // 选项名称
                points: null, // 分值
                pointsType: 1 // 分值类型1过程2阶段
              },
              {
                evaluationRoleId: null, // 角色id
                evaluationdetailitemId: null, // 能力id
                itemName: '', // 选项名称
                points: null, // 分值
                pointsType: 1 // 分值类型1过程2阶段
              },
              {
                evaluationRoleId: null, // 角色id
                evaluationdetailitemId: null, // 能力id
                itemName: '', // 选项名称
                points: null, // 分值
                pointsType: 1 // 分值类型1过程2阶段
              }
            ],
            maxcount: null, // 答案最大值
            mincount: null, // 答案最小值
            questionType: null, // 问题属性1单选2多选
            title: '' // 问题
          }
        ],
        taskId: parseInt(localStorage.getItem('taskId')), // 任务id
        testType: 1 // 问卷属性1执行人2审核人
      };
    },
    // 提交新增问卷
    async changeEditBtn() {
      // console.log(this.addTestingData);
      try {
        this.addTestingData.questionList.forEach(item => {
          // console.log(this.addTestingData);
          item.title = item.title.replace(/\s+/g, '');
          if (item.title === '') {
            throw new Error('请输入问题！');
          }
          if (item.questionType === null) {
            throw new Error('请选择答案属性！');
          }
          if (item.maxcount < item.mincount) {
            throw new Error('最大值不能小于最小值！');
          }
          if (item.maxcount > item.answervolist.length) {
            throw new Error('最大值不能大于答案选项数量！');
          }
          if (item.questionType === '2') {
            if (item.mincount === null) {
              throw new Error('请输入选项最小值！');
            }
            if (item.maxcount === null) {
              throw new Error('请输入选项最大值！');
            }
          }
          item.answervolist.forEach(i => {
            i.itemName = i.itemName.replace(/\s+/g, '');
            if (i.itemName === '') {
              throw new Error('选项不能为空！');
            }
            if (i.evaluationRoleId === null) {
              throw new Error('请选择被评分人！');
            }
            if (i.points === null) {
              throw new Error('请输入分值！');
            }
            if (i.evaluationdetailitemId === null) {
              throw new Error('能力不能为空！');
            }
            i.pointsType = parseInt(i.pointsType);
            i.points = Number(i.points);
          });
          item.questionType = parseInt(item.questionType);
          item.maxcount = parseInt(item.maxcount);
          item.mincount = parseInt(item.mincount);
        });
      } catch (error) {
        if (error.message === '请输入分值！') {
          return this.$message({
            showClose: true,
            message: '请输入分值！',
            type: 'warning'
          });
        };
        if (error.message === '选项不能为空！') {
          return this.$message({
            showClose: true,
            message: '选项不能为空！',
            type: 'warning'
          });
        };
        if (error.message === '请输入问题！') {
          return this.$message({
            showClose: true,
            message: '请输入问题！',
            type: 'warning'
          });
        };
        if (error.message === '请选择答案属性！') {
          return this.$message({
            showClose: true,
            message: '请选择答案属性！',
            type: 'warning'
          });
        };
        if (error.message === '请输入选项最小值！') {
          return this.$message({
            showClose: true,
            message: '请输入选项最小值！',
            type: 'warning'
          });
        };
        if (error.message === '请输入选项最大值！') {
          return this.$message({
            showClose: true,
            message: '请输入选项最大值！',
            type: 'warning'
          });
        };
        if (error.message === '最大值不能小于最小值！') {
          return this.$message({
            showClose: true,
            message: '最大值不能小于最小值！',
            type: 'warning'
          });
        };
        if (error.message === '最大值不能大于答案选项数量！') {
          return this.$message({
            showClose: true,
            message: '多选最大值不能大于答案选项数量！',
            type: 'warning'
          });
        };
        if (error.message === '能力不能为空！') {
          return this.$message({
            showClose: true,
            message: '请选择能力！',
            type: 'warning'
          });
        };
        if (error.message === '请选择被评分人！') {
          return this.$message({
            showClose: true,
            message: '请选择被评分人！',
            type: 'warning'
          });
        };
      }
      // console.log(this.addTestingData);
      const res = await addTesting(this.addTestingData);
      // console.log(res);
      this.loading = true;
      if (res.code === 200) {
        // 提示成功
        this.$message({
          showClose: true,
          message: '新增成功！',
          type: 'success'
        });
        this.loading = false;
        // 刷新列表
        this.getSelectTaskSummary();
        this.currentState = 2;
        // this.reload();
        // setTimeout(() => {
        //   // this.$router.go(0);
        //   // window.location.reload();
        // }, 500);
      } else {
        // 提示失败
        this.$message({
          showClose: true,
          message: '新增失败,请将信息填写完整！',
          type: 'error'
        });
      }
    },
    // 新增编辑问卷行
    pushEdit() {
      this.updateTestingData.questionList.push(
        {
          answervolist: [ // 每个问题的选项列表
            {
              evaluationRoleId: null, // 角色id
              evaluationdetailitemId: null, // 能力id
              itemName: '', // 选项名称
              points: null, // 分值
              pointsType: 1 // 分值类型1过程2阶段
            },
            {
              evaluationRoleId: null, // 角色id
              evaluationdetailitemId: null, // 能力id
              itemName: '', // 选项名称
              points: null, // 分值
              pointsType: 1 // 分值类型1过程2阶段
            },
            {
              evaluationRoleId: null, // 角色id
              evaluationdetailitemId: null, // 能力id
              itemName: '', // 选项名称
              points: null, // 分值
              pointsType: 1 // 分值类型1过程2阶段
            },
            {
              evaluationRoleId: null, // 角色id
              evaluationdetailitemId: null, // 能力id
              itemName: '', // 选项名称
              points: null, // 分值
              pointsType: 1 // 分值类型1过程2阶段
            }
          ],
          maxcount: null, // 答案最大值
          mincount: null, // 答案最小值
          questionType: null, // 问题属性1单选2多选
          title: '' // 问题
        }
      );
    },
    // 新增编辑问卷答案行限制
    editPlusBtn(i) {
      let obj = {
        evaluationRoleId: null, // 角色id
        evaluationdetailitemId: null, // 能力id
        itemName: '', // 选项名称
        points: null, // 分值
        pointsType: 1 // 分值类型1过程2阶段
      };
      if (i.answervolist.length > 7) {
        return this.$message({
          showClose: true,
          message: '选项答案最多为8项！',
          type: 'warning'
        });
      }
      i.answervolist.push(obj);
    },

    // 深拷贝
    deepCopy(obj) {
      var tempTool = Array.isArray(obj) ? [] : {};
      for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
          tempTool[key] = typeof obj[key] === 'object'
            ? this.deepCopy(obj[key])
            : Array.isArray(obj) ? Array.prototype.concat(obj[key]) : obj[key];
        }
      }
      return tempTool;
    },
    // 编辑问卷
    async editBtn() {
      const {data} = await getSelectAllRoleName({projectId: this.selectIntroduceList.projectId});
      this.ratedOptions = data;
      // console.log(this.ratedOptions);
      const {data: data1} = await getSelectAbility({projectId: this.selectIntroduceList.projectId});
      this.abilityOptions = data1;
      // console.log(this.abilityOptions);
      this.updateTestingData = { // 编辑问卷数据
        questionList: this.selectTestingList !== null ? this.deepCopy(this.selectTestingList.questionList) : [],
        taskId: parseInt(localStorage.getItem('taskId')), // 任务id
        testId: this.selectTestingList.testId,
        testType: 1 // 问卷属性1执行人2审核人
      };
      this.updateTestingData.questionList.forEach(item => {
        item.answervolist.forEach(i => {
          i.evaluationRoleId = i.roleVoList.evalroleName;
          i.evaluationdetailitemId = i.evalList.evalItemName;
        });
      });
      // console.log(this.selectTestingList.questionList);
      // console.log(this.updateTestingData.questionList);
      this.showDialog = true;
    },
    // 编辑取消
    editClose() {
      this.showDialog = false;
    },
    // 编辑确定
    async editDetermineBtn() {
      // console.log(this.updateTestingData.questionList);
      try {
        this.updateTestingData.questionList.forEach(item => {
          item.title = item.title.replace(/\s+/g, '');
          if (item.title === '') {
            throw new Error('请输入问题！');
          }
          if (item.questionType === null) {
            throw new Error('请选择答案属性！');
          }
          if (item.maxcount < item.mincount) {
            throw new Error('最大值不能小于最小值！');
          }
          if (item.maxcount > item.answervolist.length) {
            throw new Error('最大值不能大于答案选项数量！');
          }
          if (item.questionType === '2') {
            if (item.mincount === null) {
              throw new Error('请输入选项最小值！');
            }
            if (item.maxcount === null) {
              throw new Error('请输入选项最大值！');
            }
          }
          item.answervolist.forEach(i => {
            i.itemName = i.itemName.replace(/\s+/g, '');
            if (i.itemName === '') {
              throw new Error('选项不能为空！');
            }
            if (i.evaluationRoleId === null) {
              throw new Error('请选择被评分人！');
            }
            if (i.points === null) {
              throw new Error('请输入分值！');
            }
            if (i.evaluationdetailitemId === null) {
              throw new Error('能力不能为空！');
            }
            if (i.evaluationRoleId === i.roleVoList.evalroleName) {
              i.evaluationRoleId = i.roleVoList.evaluationRoleId;
            }
            if (i.evaluationdetailitemId === i.evalList.evalItemName) {
              i.evaluationdetailitemId = i.evalList.evaluationdetailitemId;
            }
            i.pointsType = parseInt(i.pointsType);
            i.points = Number(i.points);
          });
          item.questionType = parseInt(item.questionType);
          item.maxcount = parseInt(item.maxcount);
          item.mincount = parseInt(item.mincount);
          if (item.questionType === 1) {
            item.maxcount = null;
            item.mincount = null;
          }
        });
      } catch (error) {
        if (error.message === '请输入分值！') {
          return this.$message({
            showClose: true,
            message: '请输入分值！',
            type: 'warning'
          });
        };
        if (error.message === '选项不能为空！') {
          return this.$message({
            showClose: true,
            message: '选项不能为空！',
            type: 'warning'
          });
        };
        if (error.message === '请输入问题！') {
          return this.$message({
            showClose: true,
            message: '请输入问题！',
            type: 'warning'
          });
        };
        if (error.message === '请选择答案属性！') {
          return this.$message({
            showClose: true,
            message: '请选择答案属性！',
            type: 'warning'
          });
        };
        if (error.message === '请输入选项最小值！') {
          return this.$message({
            showClose: true,
            message: '请输入选项最小值！',
            type: 'warning'
          });
        };
        if (error.message === '请输入选项最大值！') {
          return this.$message({
            showClose: true,
            message: '请输入选项最大值！',
            type: 'warning'
          });
        };
        if (error.message === '最大值不能小于最小值！') {
          return this.$message({
            showClose: true,
            message: '最大值不能小于最小值！',
            type: 'warning'
          });
        };
        if (error.message === '最大值不能大于答案选项数量！') {
          return this.$message({
            showClose: true,
            message: '多选最大值不能大于答案选项数量！',
            type: 'warning'
          });
        };
        if (error.message === '能力不能为空！') {
          return this.$message({
            showClose: true,
            message: '请选择能力！',
            type: 'warning'
          });
        };
        if (error.message === '请选择被评分人！') {
          return this.$message({
            showClose: true,
            message: '请选择被评分人！',
            type: 'warning'
          });
        };
      }
      // console.log(this.updateTestingData);
      const res = await updateTesting(this.updateTestingData);
      this.loading1 = true;
      // console.log(res);
      if (res.code === 200) {
        // 提示成功
        this.$message({
          showClose: true,
          message: '编辑成功！',
          type: 'success'
        });
        this.loading1 = false;
        // 刷新列表
        this.getSelectTaskSummary();
        this.showDialog = false;
        // setTimeout(() => {
        //   this.$router.go(0);
        // }, 1000);
      } else {
        // 提示失败
        this.$message({
          showClose: true,
          message: '编辑失败,请将信息填写完整！',
          type: 'error'
        });
      }
    },

    // ---------------------------------------------------
    tableRowClassName({row, rowIndex}) {
      // 把每一行的索引放进row
      row.index = rowIndex;
    },
    onRowClick(row, event, column) {
      // 行点击消除new标记
      var index = row.index;
      var deleteIndex = Array.indexOf(this.showIndexArr, index);
      if (deleteIndex !== -1) {
        this.showIndexArr.splice(deleteIndex, 1);
      }
    },
    // 删除新增问卷行
    handelDelete(index) {
      const _this = this;
      this.$confirm('是否删除该行?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        _this.addTestingData.questionList.splice(index, 1);
        this.$message({
          showClose: true,
          type: 'success',
          message: '删除成功!'
        });
        // console.log(_this.addTestingData);
      }).catch(() => {
        this.$message({
          showClose: true,
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 删除编辑问卷行
    handelDeleteEdit(index) {
      // console.log(index);
      const _this = this;
      this.$confirm('是否删除该行?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        _this.updateTestingData.questionList.splice(index, 1);
        this.$message({
          showClose: true,
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          showClose: true,
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 导入
    handleimport() {
      this.showimport = true;
    }
  }
};
</script>

<style lang="less" scoped>
/deep/ input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}

/deep/ input[type="number"] {
  -moz-appearance: textfield;
}
/deep/ input {
  border: none;
  outline: none;
}
/deep/ .el-dialog__header {
  height: 0;
  padding: 0;
}
/deep/ .el-textarea__inner {
  border: none;
  height: 60px;
  font-size: 12px;
  padding-right: 40px;
  resize: none;
}
.Executor {
  margin-top: -1px;
  background: white;
  width: 98%;
  box-shadow: 0px 1px 3px 0px rgba(153, 153, 153, 0.5),
    1px -1px 3px 0px rgba(153, 153, 153, 0.5);
  text-align: center;
  padding: 20px;
  margin-bottom: 20px;
  .tit {
    font-size: 20px;
    font-weight: 400;
    color: #222;
  }
  .misLV {
    height: 24px;
    width: 80px;
    font-size: 12px;
    font-family: SukhumvitSet-Bold;
    background-color: #e8f8ec;
    text-align: center;
    line-height: 24px;
    display: inline-block;
    border-radius: 12px;
    margin-left: 15px;
    color: #fff;
  }
  .LvOne {
    background: #c5f5d1;
  }
  .LvTwo {
    background: #f7cbd2;
  }
  .LvThree {
    background: #cbd5f5;
  }
  .tags {
    height: 19px;
    margin: 10px 0 20px 0;
    .el-tag + .el-tag {
      margin-left: 10px;
    }
    .button-new-tag {
      margin-left: 10px;
      height: 32px;
      line-height: 30px;
      padding-top: 0;
      padding-bottom: 0;
    }
    .input-new-tag {
      width: 90px;
      margin-left: 10px;
      vertical-align: bottom;
    }
  }
  .btnbox {
    position: absolute;
    right: 40px;
    top: 50px;
    .edit {
      cursor: pointer;
      width: 100px;
      height: 35px;
      line-height: 35px;
      background-color: #2fc0e0;
      color: #fff;
      font-size: 16px;
      border-radius: 5px;
      margin-left: 30px;
    }
    .cancle {
      cursor: pointer;
      background-color: #e8f8fb;
      color: #2fc0e0;
    }
  }
  .btnbox1 {
    top: 100px;
  }
  .btnbox2 {
    top: 50px;
  }
  .table {
    text-align: left;
    position: relative;
    margin-top: 40px;
  }
  /deep/ .el-table__cell {
    padding: 0;
    border-left: 1px solid #e6ebff;
  }
  /deep/ .el-input__inner {
    width: 100%;
    height: 45px;
    border: none;
    border-bottom: 1px solid #e6ebff;
    // border-right: none;
  }
  /deep/ .cell {
    padding: 0;
    border: none;
  }
  .table1 {
    height: 65vh;
    font-size: 16px;
    color: #999;
    text-align: center;
    line-height: 50vh;
  }
  .table {
    position: relative;
    .plus1 {
      width: 17px;
      height: 18px;
      text-align: center;
      border-radius: 9px;
      line-height: 18px;
      background-color: #fff;
      font-size: 20px;
      color: #2fc0e0;
      cursor: pointer;
      position: absolute;
      z-index: 999;
    }
  }
  .el-table {
    border-right: 1px solid #e6ebff;
    /deep/tbody tr:hover > td {
      background-color: #fff;
    }
    table {
      tr {
        td {
          .queInputBox {
            position: relative;
            width: 100%;
            // height: 100%;
            text-align: center;
          }
          // .queInputBox:focus-within {
          //   box-shadow: inset 0px 1px 4px 0px #2fc0e0,
          //     inset 0px -1px 4px 0px #2fc0e0, inset 1px 0px 4px 0px #2fc0e0,
          //     inset -1px 0px 4px 0px #2fc0e0;
          // }
          .queInput {
            border: none;
            outline: none;
            width: 100%;
            height: 60px;
            text-align: center;
            transition: all 0.3s;
          }
          .radioBox {
            text-align: left;
            padding-left: 60px;
          }
          .radioBox1 {
            input:focus {
              box-shadow: inset 0px 1px 4px 0px #2fc0e0,
                inset 0px -1px 4px 0px #2fc0e0, inset 1px 0px 4px 0px #2fc0e0,
                inset -1px 0px 4px 0px #2fc0e0;
            }
          }
          .plus {
            width: 17px;
            height: 18px;
            line-height: 18px;
            text-align: center;
            border-radius: 9px;
            background-color: #e8f8fb;
            font-size: 20px;
            color: #2fc0e0;
            cursor: pointer;
            position: absolute;
            right: 20px;
            bottom: 13px;
          }
          .checkNum {
            width: 30px;
            height: 25px;
            outline: none;
            border: 1px solid #eeeeee;
          }
          img {
            width: 35px;
            height: 35px;
            cursor: pointer;
          }
          .litDelBox {
            display: flex;
            justify-content: center;
            width: 100%;
            height: 45px;
            line-height: 45px;
            border: none;
            padding: 5px 0;
            border-top: 1px solid #e6ebff;
            // border-right: none;
            box-sizing: border-box;
            overflow: hidden;
            /deep/ .el-select--mini {
              width: 90%;
              height: 100%;
              .el-input--mini {
                height: 100%;
                .el-input__inner {
                  height: 60%;
                  line-height: 100%;
                  border: none;
                }
              }
            }
          }
          .litDelBox:focus-within {
            box-shadow: inset 0px 1px 4px 0px #2fc0e0,
              inset 0px -1px 4px 0px #2fc0e0, inset 1px 0px 4px 0px #2fc0e0,
              inset -1px 0px 4px 0px #2fc0e0;
          }
          .litDel {
            margin-top: 15px;
            margin-right: 8px;
            display: inline-block;
            width: 15px;
            height: 15px;
            background: #c8c8c8;
            color: white;
            font-size: 20px;
            text-align: center;
            line-height: 15px;
            border-radius: 50%;
            cursor: pointer;
          }
          .litDel1 {
            position: absolute;
            top: calc(50% - 12px);
            right: 20px;
            margin: 0;
          }
        }
      }
    }
  }
}
</style>
